<script setup>
import { ref, reactive, onMounted } from 'vue'
import { userSettingStore } from '@/store/modules/setting'
import { Filter, RefreshRight } from '@element-plus/icons-vue'
const userSetting = userSettingStore()
const theme = userSetting.theme
const currentPage4 = ref(1)
const pageSize4 = ref(20)
const background = ref(false)
const disabled = ref(false)
const select = ref(null)

const filter = reactive({
  billNo: '',
  billNoType: ''
})

const tableData = reactive([
  {
    billNo: 'YD20240101011',
    billState: '待调度车辆',
    ddfs: '自有车',
    time: '2024-01-25 15:29:14',
    name: '小吴环球贸易公司',
    num: 1
  },
  {
    billNo: 'YD20240101011',
    billState: '待发车',
    ddfs: '自有车',
    time: '2024-01-25 15:29:14',
    name: '小吴环球贸易公司',
    num: 2
  },
  {
    billNo: 'YD20240101011',
    billState: '已发车',
    ddfs: '自有车',
    time: '2024-01-25 15:29:14',
    name: '小吴环球贸易公司',
    num: 3
  },
  {
    billNo: 'YD20240101011',
    billState: '已到达',
    ddfs: '自有车',
    time: '2024-01-25 15:29:14',
    name: '小吴环球贸易公司',
    num: 4
  },
  {
    billNo: 'YD20240101011',
    billState: '待调度车辆',
    ddfs: '自有车',
    time: '2024-01-25 15:29:14',
    name: '小吴环球贸易公司',
    num: 1
  }
])

const headerCellStyle = () => {
  return { backgroundColor: '#F5F7FA', color: '#0B1532', fontWeight: '400' }
}

const selectTable = ref(null)

// table 合计
const getSummaries = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    if (index === 3) {
      const values = data.map((item) => item[column.property])
      sums[index] = `${values.length >= 1 ? values.length + '单' : 0}`
    } else {
      sums[index] = ''
    }
  })

  return sums
}

onMounted(() => {
  const scrollBar = selectTable.value.$refs.bodyWrapper.children[0].children[1]
  selectTable.value.$refs.tableWrapper.appendChild(scrollBar)
})
</script>

<template>
  <div class="list_right_content">
    <div class="list_left_content_filter_pane">
      <el-form :model="filter" inline class="list_leftcontent_filter_pane_form">
        <el-button
          type="primary"
          plain
          :icon="Filter"
          :style="{ '--el-button-bg-color': '#fff', 'border-color': theme }"
          >筛选查询</el-button
        >
        <div class="list_leftcontent_filter_pane_form_billNo">
          <el-input
            v-model="input3"
            style="max-width: 600px"
            placeholder="请输入"
            class="input-with-select"
          >
            <template #prepend>
              <el-select v-model="select" placeholder="请选择" style="width: 100px">
                <el-option label="订单号" value="1" />
                <el-option label="客户订单号" value="2" />
              </el-select>
            </template>
            <template #append>
              <el-button
                style="width: 40px; padding: 0; color: #fff"
                type="primary"
                :style="{ 'background-color': theme }"
                >搜索</el-button
              >
            </template>
          </el-input>
        </div>
      </el-form>
    </div>

    <div class="list_right_content_table" :style="{ '--theme': theme }">
      <div class="list_right_content_table_opt">
        <div>
          <el-button plain>再来一单</el-button>
          <el-button plain>发车</el-button>
          <el-button plain>到达</el-button>
          <el-button plain>提交对账</el-button>
          <el-button plain>支付司机</el-button>
          <el-button plain>导出</el-button>
        </div>
        <div class="">
          <el-button
            :style="{
              'background-color': '#E8E9EA',
              '--el-text-color-regular': '#666'
            }"
            :icon="RefreshRight"
            plain
            >刷新</el-button
          >
        </div>
      </div>

      <div class="list_right_content_table_wrap">
        <el-table
          :data="tableData"
          ref="selectTable"
          style="width: 100%"
          border
          :style="{ '--el-table-row-hover-bg-color': '#fff' }"
          :header-cell-style="headerCellStyle"
          :summary-method="getSummaries"
          show-summary
          scrollbar-always-on
        >
          <el-table-column type="index" align="center" width="55px" fixed="left" />
          <el-table-column type="selection" width="50" fixed="left" />
          <el-table-column fixed="left" width="140" label="操作">
            <template #default="scope">
              <div class="billNo">
                <el-space>
                  <el-text
                    :type="scope.row.num === 1 ? 'primary' : 'default'"
                    :style="{ '--el-link-font-size': '12px' }"
                    >调度</el-text
                  >
                  <el-text
                    :type="scope.row.num === 2 ? 'primary' : 'default'"
                    :style="{ '--el-link-font-size': '12px' }"
                    >发车</el-text
                  >
                  <el-text
                    :type="scope.row.num === 3 ? 'primary' : 'default'"
                    :style="{ '--el-link-font-size': '12px' }"
                    >到达</el-text
                  >
                </el-space>
              </div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="billNo" label="运单号" width="220px" />
          <el-table-column show-overflow-tooltip prop="billState" label="运单状态" width="100px">
            <template #default="scope">
              <div class="billState">
                <el-tag v-if="scope.row.num === 1" type="info">{{ scope.row.billState }}</el-tag>
                <el-tag v-if="scope.row.num === 2" type="warning">{{ scope.row.billState }}</el-tag>
                <el-tag v-if="scope.row.num === 3" type="primary">{{ scope.row.billState }}</el-tag>
                <el-tag v-if="scope.row.num === 4" type="success">{{ scope.row.billState }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="ddfs" label="调度方式" width="100px" />
          <el-table-column show-overflow-tooltip prop="time" label="发单时间" width="180px" />
          <el-table-column show-overflow-tooltip prop="name" label="客户名称" width="130px" />
          <el-table-column show-overflow-tooltip prop="billNo" label="客户单号" width="140px" />
          <el-table-column show-overflow-tooltip prop="name" label="装货地址" width="160px" />
          <el-table-column show-overflow-tooltip prop="name" label="卸货地址" width="160px" />
          <el-table-column show-overflow-tooltip prop="name" label="货物名称" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="件数" align="right" />
          <el-table-column
            show-overflow-tooltip
            prop="num"
            label="重量（吨）"
            width="120px"
            align="right"
          />
          <el-table-column
            show-overflow-tooltip
            prop="num"
            label="体积（方）"
            width="120px"
            align="right"
          />
          <el-table-column show-overflow-tooltip prop="ddfs" label="包装" />
          <el-table-column show-overflow-tooltip prop="num" label="回单状态" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应收合计" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应收运费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应收提货费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应收包装费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应收装卸费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应收送货费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应收中转费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应收其他费用" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应收保险费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="是否开票" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="税点" />
          <el-table-column show-overflow-tooltip prop="num" label="税金" />
          <el-table-column show-overflow-tooltip prop="num" label="应收结算方式" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="承运商" />
          <el-table-column show-overflow-tooltip prop="num" label="车牌" />
          <el-table-column show-overflow-tooltip prop="num" label="司机" />
          <el-table-column show-overflow-tooltip prop="num" label="司机电话" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付合计" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付未结" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付基础运费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付路桥费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付装卸费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付住宿费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付保险费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付油费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付其他费" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付现付" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付到付" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付回付" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="应付油卡" width="120px" />
          <el-table-column show-overflow-tooltip prop="num" label="制单人" />
          <el-table-column show-overflow-tooltip prop="time" label="创建时间" width="180px" />
        </el-table>
        <div class="list_pagination">
          <span class="list_pagination_selected"
            >已选<em :style="{ '--theme': theme }">10</em>条</span
          >
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[10, 20, 50, 100]"
            :disabled="disabled"
            :background="background"
            layout="prev, jumper, total,next, sizes,"
            :total="500"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.list_right_content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .list_left_content_filter_pane {
    padding: 14px 10px;
    height: 55px;
    background-color: #fff;

    .list_leftcontent_filter_pane_form {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;

      .el-button--primary:focus {
        background-color: var(--el-button-hover-bg-color);
        color: #fff;
      }

      .list_leftcontent_filter_pane_form_billNo {
        margin-left: 8px;
      }
    }
  }

  .list_right_content_table {
    margin-top: 6px;
    height: calc(100% - 62px);
    background-color: #fff;

    .list_right_content_table_opt {
      padding: 17px 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
    }

    .list_right_content_table_wrap {
      padding: 0 10px;
      height: calc(100% - 58px);
    }

    ::v-deep(.el-scrollbar__bar) {
      bottom: 0;
      z-index: 2;
      background-color: #f2f3f7;
    }
  }
}

.list_pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .list_pagination_selected {
    margin-left: 48px;
    font-weight: 400;
    font-size: 14px;
    color: #68728e;
    line-height: 38px;

    em {
      margin: 0 8px;
      font-weight: bold;
      font-size: 14px;
      color: var(--theme);
    }
  }
}
</style>
